<template>
   <div id="app">
     <!-- -------头部导航------- -->
    <nav class="topNav dip">
      <!-- <router-link class="topNav_link" :to="this.topnavReturn.ToUrl">
        <img :src="'./static/images/index/'+this.topnavReturn.img+''" alt="" class="topNaval_img">
      </router-link> 
      // 这是跳转链接
      -->
      <span class="topNav_link" @click="ISaddshow()">
        <img :src="'./static/images/index/'+this.topnavReturn.img+''" alt="" class="topNaval_img">
      </span>
      <span class="topNav_logo_box"  v-if="this.topnavText.TerxIs" >
        <router-link class="topNav_logo" :to="this.topnavText.ToUrl">
          <img :src="'./static/images/index/'+this.topnavText.img+''" class="topNaval_img"> 
        </router-link>
      </span>
      <i v-else class="topNaval_Text">{{this.topnavText.Text}}</i>     
      <!-- <router-link class="topNav_savser" :to="this.topnavSavser.ToUrl">
        <img :src="'./static/images/index/'+this.topnavSavser.img+''" alt="" class="topNaval_img">        
      </router-link> 
      //这是跳转路由（客服）
      -->
      <span class="topNav_savser" @click="Customer()">
        <img :src="'./static/images/index/'+this.topnavSavser.img+''" alt="" class="topNaval_img">        
      </span>
    </nav>
    <!-- ---------内容--------- -->
    <div class="con_app dipW">
      <!-- <transition :name="transitionName">   -->
        <router-view class='router'></router-view>  
      <!-- </transition> -->
      
    </div>

    <div class="sdfkdhsgfkhd">{{this.nikan}}</div>


    <!-- --------底部导航------ -->
    <ul class="btmNav dip" v-if="this.IFbmnav" >
      <li tag="div" v-for="(item,index) in bonNav" class="bto-link dipW" :key="index"  :class="{'active':ind === index}"  @click="reds(index,item.url)">
        <span class="bom_img_box" v-show="item.imgActiveTrue">
          <!-- <i class="i_img1"  :style="'background:url(./static/images/index/'+item.img+') no-repeat center '"></i> 
            -------这是用背景图片的按钮--------
          -->
          <img :src="'./static/images/index/'+item.img+''" alt="" class="i_img1">
        </span>
        <span class="bom_img_box" v-show="item.imgActive">
          <!-- <i class="i_img1" :style="'background:url(./static/images/index/'+item.activeIMGscr+') no-repeat center'"></i> 
          -------这是用背景图片的按钮--------
          -->
          <img :src="'./static/images/index/'+item.activeIMGscr+''" alt="" class="i_img1">          
        </span>
        <span class="i_font">{{item.text}}</span>
      </li>
    </ul>
    <!-- --------更多组件------ -->
    <transition :name="transitionNameComponents"  >  
      <delAdd v-show="this.nonr" @showState="changeState()"></delAdd>
      <!-- <delAdd v-show="this.nonr"></delAdd> -->
    </transition>
    <transition :name="transitionNameComponents">  
      <!-- <CurAdd v-show="this.Curnone"></CurAdd> -->
      <CurAdd v-show="this.Curnone" @showCustome="changeCustome()"></CurAdd>      
    </transition>
  </div>
</template>
<script>
import delAdd from './More'
import CurAdd from './Customer'
export default {
  data(){
    return{
      // transitionName: 'slide-right',  
      transitionNameComponents:'slide-block',    
      nonr:false,
      Curnone:false,
      IFbmnav:true,
      bonNav:[
        {
          url:'/bomNav',
          text:'首页',
          img:'shouye.png',
          activeIMGscr:'shouyeActive.png',
          imgActive:false,
          imgActiveTrue:true
        },
          {
          url:'/bomNav/mall',
          text:'商城',
          img:'mall.png',
          activeIMGscr:'mallActive.png',
          imgActive:false,
          imgActiveTrue:true
        }
        ,{
          url:'/bomNav/taskContent',
          text:'发布任务',
          img:'task.png',
          activeIMGscr:'taskActive.png',
          imgActive:false,
          imgActiveTrue:true
        }, {
          url:'/bomNav/userContent',
          text:'会员中心',
          img:'cenuser.png',
          activeIMGscr:'cenuserActive.png',
          imgActive:false,
          imgActiveTrue:true
        }
      ],
      topnavReturn:{
        ToUrl:'/bomNav/More',
        img:'much.png'
      },
      topnavText:{
        ToUrl:'/',
        TerxIs:true,
        img:'logo.png',
        Text:''
      },
      topnavSavser:{
        ToUrl:'/',
        img:'service.png'
      },
      ind:'',
      nikan:"",
    }
  },
  components:{delAdd,CurAdd},
  // beforeCreate(){
  // },
  created(){//打开页面直接执行 创建完毕状态
    this.IsShow()  //默认第一个
    if(this.$route.path === '/bomNav/Singleassistant'){
      this.IsClass(0,'投放广告',false)
      this.IFbmnav = false
      this.nonr = false
      this.Curnone = false
    }else if(this.$route.path === '/bomNav/SingSeas'){
      this.IsClass(0,'接单助手',false)
      this.IFbmnav = false
      this.nonr = false
      this.Curnone = false
    }else if(this.$route.path === '/bomNav/taskseccess'){
      this.IsClass(3,'会员中心',false)
      this.IFbmnav = false
    }else if(this.ifISRouter() == true){
      this.IFbmnav = false
    }else if(this.$route.path === '/bomNav/userIfon'){   // 到 发布任务 
      this.IsClass(3,'设置',false)
      this.IFbmnav = false
    }else if(this.$route.path === '/bomNav/Ordershuo/userassispay'){   // 到 发布任务 
      this.IsClass(3,'接单助手',false)
      this.IFbmnav = false
    }  
    //调用个人信息
    // this.getUserifon()//(弃用)
    //调用分享接口
    this.$wechatShare.wechatShare()
    //个人信息不调用
    // this.$store.dispatch('hideuserifonS')(弃用)
    // console.log(this.$store.dispatch('showloader'))
    // console.log(this.$store.getters.showuserifon) 
  },
  methods:{
      getUserifon(){
        this.axios.post(this.$busPoat.userInfo(),{}).then(response=>{
          // this.userifon = response.data.user
          sessionStorage.setItem('balance',JSON.stringify(response.data))
          // console.log(this.userifon)
          // console.log(JSON.parse(sessionStorage.getItem('balance')))       
        }).catch(error=>{
          alert('获取用户信息失败')
          console.log(error)
        })
      },
      reds:function(index,item){ // 这是判断点击路由
          let _this = this ;
          _this.$router.push({path:''+item+''})      
          _this.ind = index;
          if(_this.ind == index){
            if(index == 1){
              //这是判断topNav的 中间的text
              _this.IsClass(index,'商城',false)
            }else if(index == 2){
              _this.IsClass(index,'任务',false)
            }else if(index == 3){
              _this.IsClass(index,'会员中心',false)
            }else {
              _this.IsClass(index,'',true)
            } 
          }          
      },
      IsClass:function(index,text,rt){ //封装函数
        let _this = this;
        _this.topnavText.TerxIs = rt; // true 就是显示图片（topNav）
        _this.topnavText.Text = text; //文本
        for(var i = 0;i<_this.bonNav.length;i++){
          //让所有的 bomNav 的图片的active
          _this.bonNav[i].imgActive = false
          _this.bonNav[i].imgActiveTrue = true
        }    
        _this.bonNav[index].imgActive = true;
        _this.bonNav[index].imgActiveTrue = false;  
      },
      IsShow:function(){ //创建前 调用
          let _this = this ;
          if(_this.$route.path == '/bomNav'){
            _this.IsClass(0,'首页',true)
            this.ind = 0;
          }else if( _this.$route.path == '/bomNav/mall'){
            _this.IsClass(1,'商城',false)
            this.ind = 1                      
          }else if(_this.$route.path == '/bomNav/taskContent'){
          _this.IsClass(2,'任务',false)
            this.ind = 2     
          }else if(_this.$route.path == '/bomNav/userContent'){
          _this.IsClass(3,'会员中心',false)
            this.ind = 3 
          }
      },
      ISaddshow(){ //更多
        this.nonr = !this.nonr;
        this.Curnone = false
      },
      Customer(){ //k客服
        // this.Curnone = false == this.Curnone;
        // let section = document.getElementById('section_box');
        // section.style.display = 'block';
        // this.Curnone = true;
        this.Curnone = !this.Curnone;
        this.nonr = false; 
      },
      ifISRouter(){
        var router = this.$route.path;
        return  router === '/details/1' || 
                router === '/details/2' || 
                router === '/1/Order' || 
                router === '/2/Order' || 
                router === '/1/Order/OrderDetails/1' ||
                router === '/1/Order/OrderDetails/2' || 
                router === '/2/Order/OrderDetails/1' || 
                router === '/2/Order/OrderDetails/2' ||
                router === '/bomNav/taskDetail' ||
                router === '/bomNav/userOpinion' ||
                router === '/bomNav/heipcontent' ||
                router === '/bomNav/userbalance' ||
                router === '/bomNav/orderAdm' ||
                router === '/bomNav/orderAdm/orderAdmDetilas' ||
                router === '/bomNav/startTask/join' ||
                router === '/bomNav/startTask/issue' ||
                router === '/bomNav/userIfoncontent' ||
                router === '/bomNav/Ordershuo' ||
                router === '/bomNav/Ordershuo/userassis' ||
                router === '/bomNav/Ordershuo/userassispayseccess' ||
                router === '/bomNav/OrderDetails/orderseccess' ||
                router === '/bomNav/orderevaluate/busievalate' ||
                router === '/bomNav/orderevaluate/Creaevalate' ||
                router === '/bomNav/Ordershuo/assisaccess' ||
                router === '/bomNav/userCearshi' ||
                router === '/bomNav/taskposterDetails' ||
                // router === '/bomNav/orderevaluate/assisaccess' ||
                // router === '/bomNav/orderevaluate/assisaccess' ||
                router === '/bomNav/Verification' ;
      },
      changeState(){
        this.nonr = false;
      },
      changeCustome(){
        this.Curnone = false
      },
  },
  watch: {  
    '$route' (to, from) { //这个在总页面的 添加才有晓得
        // console.log(to.path)  
      if(to.path == '/bomNav/mall'){  //到  首页
        // this.transitionName = 'slide-right';  
        // this.transitionName = 'slide-left';  
        this.IsClass(1,'商城',false)
        this.ind = 1;
        this.IFbmnav = true
      }
      if(to.path === '/bomNav' || to.path === '/'){ //到商城
        // this.transitionName = 'slide-left';  
        // this.transitionName = 'slide-right';
        this.IsClass(0,'首页',true)
        this.ind = 0  
        this.IFbmnav = true
        this.nonr = false
        this.Curnone = false
      }
      if(to.path === '/bomNav/taskContent'){   // 到 发布任务
        // this.transitionName = 'slide-right';  
        // this.transitionName = 'slide-block';  
        this.IsClass(2,'任务',false)
        this.ind = 2;
        this.IFbmnav = true
      }  
      if(to.path === '/bomNav/userContent'){   // 到 发布任务
        // this.transitionName = 'slide-right';  
        // this.transitionName = 'slide-block';  
        this.IsClass(3,'会员中心',false)
        this.ind = 3;
        this.IFbmnav = true
      }  
      if(to.path === '/bomNav/Singleassistant'){
        this.IsClass(0,'投放广告',false)
        this.IFbmnav = false
        this.nonr = false
        this.Curnone = false
      }
      if(to.path === '/bomNav/SingSeas' || to.path === '/bomNav/Ordershuo/userassispay'){
        this.IsClass(0,'接单助手',false)
        this.IFbmnav = false
        this.nonr = false
        this.Curnone = false
      }
      if(to.path === '/bomNav/OrderDetails/orderseccess'){
        this.IsClass(2,'订单成功',false)
        this.IFbmnav = false
      }
      if(to.path === '/bomNav/taskseccess'){   // 到 发布任务 
        this.IsClass(3,'发布成功',false)
        this.IFbmnav = false
      }  
      if(to.path === '/bomNav/userIfon'){   // 到 发布任务 
        this.IsClass(3,'设置',false)
        this.IFbmnav = false
      }   
      if(this.ifISRouter() == true){
        this.IFbmnav = false
      }
    }  
  },
  beforeRouteEnter:(to, from, next) => {
      var ua = window.navigator.userAgent.toLowerCase(); 
      if(ua.match(/MicroMessenger/i) == 'micromessenger') { //判断是不是微信浏览器
        if(to.meta.auth){ //判断是不是必须要登录
          if(sessionStorage.getItem('token') == null){ //判断是不是已经登陆过了
            var url = location.search; //获取url中"?"符后的字串 
            this.nikan = location.search
            alert(this.nikan)
            var theRequest = new Object(); //new一个对象
            if (url.indexOf("?") != -1) {
              var str = url.substr(1);
              if (str.indexOf("&") != -1) {
                var strs = str.split("&");
                for (var i = 0; i <strs.length; i++) {
                  theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                }
              } else {
                theRequest[str.split("=")[0]] = unescape(str.split("=")[1]);
              }
            }
            var codes = theRequest.code; 
            var uiserid = theRequest.uiserid; 
            // ?uiserid=dfgddsfdfsd
            console.log(codes)
            if(codes != null || codes != undefined){ //判断有没有授权
              $$.ajax({
                type : "GET",
                url: "http://www.iplan-ad.com/api/auth/wechat/getWXUserInfo",
                data: {
                  'code':codes
                },
                success:(response=>{
                  console.log(response)
                  sessionStorage.setItem('openId',response.oppenid)
                  sessionStorage.setItem('token',response.token)
                  if(response.iplanCode == 101){
                    sessionStorage.setItem('unionid',response.userinfo.unionid)
                    next({path:'/bomNav/Verification'})             
                  }   
                  next()   
                }),
                error:((err)=>{
                  alert(err)
                  next()
                })
              })
              next()
            }else{
              var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfefc1188cb991ef1&redirect_uri=http%3a%2f%2fwww.iplan-ad.com%2fapp%2f%23"+to.path+"&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
              location.replace(url)
            }
          }else{
            localStorage.removeItem('token')
            next()
          }
          // sessionStorage.setItem('token','eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiLlsLHlpb3mr5TmiqXpgZMiLCJ1c2VySWQiOiIwMTYyNzA4N2I2NGU0MDI4ODAxODYyNzA1MTU3MDAwYSIsIm5hbWUiOiIxNTcwMDAwMDAwMCIsImV4cCI6MTUyNDMxNTA3NH0.eeL8kyNzo5g9LBiEbsPrsOFxwZhRO3sMpdDy9BFBPYecZxZATGQ_bdeOssHl5ZantzKrNEFGidr9zvSDiszepOKUDXRG3OURvSW9jfAP3Zgw-P0NOutWROg3bhoBfk2qieDehspWhxaccWrgaTNNVL66Enxocp2WDWdev4kHIpo')
          next()
        }else{
          next()
        }
      }else{ 
        var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxfefc1188cb991ef1&redirect_uri=http%3a%2f%2fwww.iplan-ad.com%2fapp%2f%23%2fbomNav&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
        location.replace(url)
      }
  },

  }
</script>
<style lang="scss" scoped>
html,body{
  height:100%
}
.sdfkdhsgfkhd{
  position: relative;
  width: 100%;
  // background: blue;
  color:#ff7200;
  font-size:.36rem;
  height: 3rem;
}
//头部导航
.topNav{
  width: 100%;
  height: .79rem;
  position: fixed;
  top:0rem;
  z-index: 50;
  background: #fff;
    -webkit-justify-content: space-between;
      -ms-flex-pack: distribute;
          justify-content: space-between;
    -webkit-box-align:center;
  -webkit-align-items:center;
     -moz-box-align:center;
      -ms-flex-align:center;
          align-items:center;
  border-bottom: .01rem #DEDEDE solid;
  padding:0rem .4rem;
  .topNaval_img{
    width: 100%;
    height: 100%;
  }
  .topNaval_Text{
    text-decoration:none;
    // height: 100%;
    line-height: .54rem;
    font-size: .34rem;
    font-family: "MicrosoftYaHei";
    color:#333;
  }
  .topNav_link{
    display: block;
    width: .45rem;
    height: .35rem;
  }
  .topNav_logo_box{
    width: 0.5rem;
    height: 0.55rem;
  }
  .topNav_logo{
    height: 0.55rem;
    width: 0.5rem;
    display: block;
  }
  .topNav_savser{
    height: 0.42rem;
    width: 0.48rem;
  }
}
//内容
.con_app{
  position: relative;;
  width: 100%;
  height: 100%; 
}
//底部导航
.btmNav{
  width: 100%;
  height: 1rem;
  z-index: 48;
  position: fixed;
  bottom:0rem;
  left:0rem;
  border-top:.02rem solid #fafafa;
  background:rgba(255,255,255,.97);  
  // background: #FFF;
  // background: #ff6600;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;

}
.bto-link{
  width: 25%;
  justify-content: center;
  align-items: center;
  height: 100%;
  // [dpr =1]{
  //   .i_img{
  //     width: 50%;
  //     height: 50%;
  //   }
  // }
  .bom_img_box{
    width: 30%;
    height: 0.5rem;
  }
  .i_img1{
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    // background-size:100% 100%; 
  }
  .i_font{
    width: 100%;
    font-size: .18rem;
    text-align: center;
    color:#666;
    font-family: 'MicrosoftYaHei';
  }
}
.active{
  .i_font{
    color:#ff7200;
  }
}
.router {  
     width: 100%;  
     transition: all .6s ease;  
}  
.slide-left-enter,.slide-right-leave-active {  //左进入 右结束
    opacity: 0;  
    -webkit-transform: translate(100%, 0);  
    -moz-transform: translate(100%, 0);  
     -ms-transform: translate(100%, 0);  
      -o-transform: translate(100%, 0);  
         transform: translate(100%, 0);  
}   
.slide-left-leave-active,.slide-right-enter {  //左结束 右进入
   opacity: 0;  
    -webkit-transform: translate(-100%, 0);  
    -moz-transform: translate(-100%, 0);  
     -ms-transform: translate(-100%, 0);  
      -o-transform: translate(-100%, 0);  
         transform: translate(-100%, 0);
} 
.slide-block-enter{
   opacity: 0;
   -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;
}
.slide-block-leave-active{  
  opacity: 0;  
  -webkit-transition: all .8s;
  -o-transition: all .8s;
  -moz-transition: all .8s;
  transition: all .8s;  
} 
//更多
.mystyle{
  overflow:hidden;
  overflow-y:hidden;
}

</style>

